<template>
  <div class="tab-container waybill-tab-container tab-fixed">
    <el-tabs v-model="activeName" type="border-card">
      <el-tab-pane
        v-for="item in tabMapOptions"
        :key="item"
        :label="$t(`endWaybill.${item}`)"
        :name="item"
      >
        <keep-alive>
          <tab-pane
            v-if="activeName == item"
            :type="item"
            :create-tpye="createTpye"
            @create="showCreatedTimes"
          />
        </keep-alive>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import TabPane from './TabPane'

export default {
  name: 'Tab',
  components: { TabPane },
  props: {
    createTpye: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      tabMapOptions: [
        'customsClearanceAndSend',
        'customsClearance',
        'expressDelivery',
        'truckDelivery'
      ],
      activeName: 'customsClearanceAndSend',
      createdTimes: 0
    }
  },
  watch: {
    // activeName(val) {
    //   this.$router.push(`${this.$route.path}?tab=${val}`)
    // }
  },
  created() {
    console.log('this.$route.params :>> ', this.$route)
    if (this.$route.query.palceOrderWay) {
      switch (this.$route.query.palceOrderWay) {
        case '0':
          this.activeName = 'customsClearanceAndSend'
          break
        case '1':
          this.activeName = 'customsClearance'
          break
        case '2':
          this.activeName = 'expressDelivery'
          break
        case '3':
          this.activeName = 'truckDelivery'
          break
      }

      console.log('this.activeName :>> ', this.activeName)
    }
  },
  methods: {
    showCreatedTimes() {
      this.createdTimes = this.createdTimes + 1
    }
  }
}
</script>

<style lang="scss" scoped>
// .el-tabs--border-card {
//   background: transparent;
//   border: 1px solid #dcdfe6;
//   box-shadow: none;
// }
</style>
<style lang="scss">
.waybill-tab-container {
  .el-tabs--border-card {
    background: transparent;
    box-shadow: none;
    .el-tabs__header {
      background: #fff;
      .el-tabs__item {
        border: 0;
        margin-top: 0;
      }
      .is-active {
        border-bottom: 2px solid #1890ff;
      }
    }
    .el-tabs__content {
      padding: 10px;
    }
  }
}
</style>
